<script setup>
import { ref, computed, defineProps } from "vue";
import { useMouseInElement } from "@vueuse/core";

const props = defineProps({ images: String });

// ref 获取 DOM 元素的位置
const target = ref(null);
// isisOutside为 true 的时候代表鼠标未进入目标元素，为 false 时代表鼠标进入目标元素
const { elementX, elementY, isOutside } = useMouseInElement(target);
// 遮罩半透明图在商品大图中的坐标位置
const position = computed(() => {
  let x = elementX.value - 115;
  let y = elementY.value - 64;
  console.log()
  if (x <= 0) x = 0;
  if (x >= 230) x = 230;
  if (y <= 0) y = 0;
  if (y >= 129) y = 129;
  return { x, y };
});
</script>
<template>
  <div class="product-image">
    <!-- 放大镜的大盒子 -->
    <div
      class="large"
      :style="[
        {
          backgroundImage: `url(${props.images})`,
          backgroundPosition: `-${position.x * 3}px -${position.y * 3}px`,
        },
      ]"
      v-show="!isOutside"
    ></div>
    <div ref="target" class="middle">
      <img :src="props.images" alt="" />
      <!-- 鼠标移动时的遮罩层 -->
      <div
        class="layer"
        v-show="!isOutside"
        :style="{ left: `${position.x}px`, top: `${position.y}px` }"
      ></div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.product-image {
  position: relative;
  display: flex;
  z-index: 500;
  .large {
    position: absolute;
    top: 0;
    left: calc(100% + 80px);
    @include fn.scale(480px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    background-size: 200% 200%;
    background-color: #f8f8f8;
  }
  .middle {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    position: relative;
    cursor: move;

    img {
      @include fn.cover;
    }

    .layer {
      width: 230px;
      height: 129px;
      background: rgba(0, 0, 0, 0.2);
      left: 0;
      top: 0;
      position: absolute;
    }
  }
  .small {
    width: 80px;
    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;
      &:hover,
      &.active {
        border: 2px solid #27ba9b;
      }
    }
  }
}
</style>